import React,{useState,useEffect} from 'react'
import {View,Text,Image,StyleSheet,TouchableOpacity,ImageBackground} from 'react-native'
import '../global'

const styles = StyleSheet.create({
    box:{
        height:h,
        backgroundColor:'white'
    },
    ImageIcon:{
        width:pxtodpW(200),
        height:pxtodpH(200),
        marginLeft:pxtodpW(50),
        marginRight:pxtodpW(50),
        borderRadius:100
    },
    headView:{
        height:pxtodpH(300),
        display:'flex',
        flexDirection:'row',
        paddingTop:pxtodpH(50)
    },
    buttonStyle:{
        backgroundColor:'red',
        width:100,
        height:20
    }
})
const User = ({navigation}) => {
    const [userInformation,setUserInformation] = useState(userMessage);
  return (
    <View style={styles.box}>
       <View style={styles.headView}>
            <Image 
                source={{ uri: userInformation.user_avatar}}
                style={styles.ImageIcon}
            />
            <View>
                <Text style={{"fontSize":25}}>昵称 : {userMessage.user_name}</Text>
                <TouchableOpacity style={{position:'absolute',left:pxtodpW(250),}}
                    onPress={()=>{
                        navigation.navigate('changeMessagePage');
                    }}
                >
                    <Text style={{
                        color:'blue',
                        fontSize:18
                    }}>更改信息-》》</Text>
                </TouchableOpacity>
                <Text style={{"fontSize":25}}>性别 : {userMessage.user_gendar}</Text>
                <Text style={{"fontSize":25}}>宣言 : {userMessage.user_signature}</Text>
            </View>
       </View>
       <View style={{
           display:"flex",
           flexDirection:"row",
           flexWrap:'wrap'
        }}>
            <Image
                source={require("../images/happyBoy.jpg")}
                style={{
                    width:pxtodpW(200),
                    height:pxtodpH(300),
                    marginLeft:pxtodpW(60),
                    marginRight:pxtodpW(120)
                }}
            />
           <TouchableOpacity activeOpacity={0.6}
           style={{position:'relative'}}
           onPress={()=>{
               navigation.navigate('PractiseEveryDay');
           }}>
                <ImageBackground
                    source={require("../images/button1.jpg")}
                    style={{
                        width:pxtodpW(300),
                        height:pxtodpH(200)
                    }}
                ><Text 
                    style={{
                        position:'absolute',
                        left:pxtodpW(60),
                        top:pxtodpH(75),
                        fontSize:25
                    }}>每日一练
                </Text></ImageBackground>
           </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.6} 
            style={{
                marginLeft:pxtodpW(320),
                position:'absolute',
                top:pxtodpH(200),
                left:pxtodpW(60)
            }}
            onPress={()=>{
                navigation.navigate('StartLearning');
            }}>
                <ImageBackground
                    source={require("../images/button2.jpg")}
                    style={{
                        width:pxtodpW(300),
                        height:pxtodpH(200)
                    }}
                ><Text 
                    style={{
                        position:'absolute',
                        left:pxtodpW(60),
                        top:pxtodpH(75),
                        fontSize:25
                    }}>自习室
                </Text></ImageBackground>
           </TouchableOpacity>
           <TouchableOpacity activeOpacity={0.6}
                onPress={()=>{
                    navigation.navigate('Mypublish',{txt:'我的问题'});
                }}
                style={{
                    marginLeft:pxtodpW(60),
                    marginTop:pxtodpH(20)
                }}>
                <ImageBackground
                    source={require("../images/button3.jpg")}
                    style={{
                        width:pxtodpW(300),
                        height:pxtodpH(220)
                    }}
                ><Text 
                    style={{
                        position:'absolute',
                        left:pxtodpW(60),
                        top:pxtodpH(75),
                        fontSize:25
                    }}>我的问题
                </Text></ImageBackground>
           </TouchableOpacity>
           <TouchableOpacity activeOpacity={0.6}
           style={{
               marginRight:pxtodpW(150),
               marginLeft:pxtodpW(60),
               marginTop:pxtodpH(20)
           }}
           onPress={()=>{
            navigation.navigate('Mycollection',{txt:'我的收藏'});
        }}
           >
           <ImageBackground
                    source={require("../images/button4.jpg")}
                    style={{
                        width:pxtodpW(300),
                        height:pxtodpH(200)
                    }}
                ><Text 
                    style={{
                        position:'absolute',
                        left:pxtodpW(60),
                        top:pxtodpH(75),
                        fontSize:25
                    }}>我的收藏
                </Text></ImageBackground>
           </TouchableOpacity>
           <Image
                source={require("../images/happyGril.jpg")}
                style={{
                    width:pxtodpW(220), 
                    height:pxtodpH(340),
                    position:'absolute',
                    bottom:pxtodpH(10),
                    left:pxtodpW(450)
                }}
           />
       </View>
    </View>
  )
}

export default User